<template>

  <div id="index" ref="appRef">
    <div v-if="isfull" class="fullTips">
      按 F11 进入全屏浏览更佳
    </div>
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">

        <dv-decoration-12
            style="width:100%;height:100%;opacity: .1;position: absolute;top:0;left:0;z-index: 1"></dv-decoration-12>
        <Header></Header>
        <div class="mains">
          <div class="left">
            <div class="menu">
              <pageMenu :router="this.$route" @checkMenu="checkMenu"/>
            </div>
            <div class="map" style="position: relative">
              <div class="left-marin-warp">
                <div class="swiper-container" ref="floor1Swiper" style="width: 100%" @mouseover="swiperAction(1)"
                     @mouseleave="swiperAction()">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <leftmain/>
                    </div>
                    <div class="swiper-slide">
                      <shengzhi/>
                    </div>
                  </div>
                  <div class="swiper-pagination"></div>
                  <div class="locks" @click="setlock">
                    <el-tooltip class="item" effect="light" :content="lock==1?'解锁自动切换':'锁定自动切换'" placement="top">
                      <i :class="['iconfont',lock==1?'icon-jiesuo':'icon-suoding']"/>
                    </el-tooltip>
                  </div>
                </div>
              </div>
              <div class="right-info">
                <MapInfo></MapInfo>
              </div>
            </div>
            <div class="wzdataBox">
              <div class="citylist">
                <cityRank></cityRank>
              </div>
              <div class="threadlist">
                <newData></newData>
              </div>
            </div>
          </div>
          <div class="right" style="position: relative;z-index: 10">
            <rankData></rankData>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import 'swiper/css/swiper.css'
import drawMixin from "@/utils/drawMixin";
import {formatTime} from '../utils/index.js'
import Header from '../components/common/Header'
import Citys from '../components/map/Citys'
// import BarTitle from '../components/common/barTitle'
// import BarEchar from '../components/common/BarEchar'
import pageMenu from '../components/common/pageMenu'
import newData from '../components/common/newData'
import cityRank from '../components/common/cityRank'
import MapInfo from '../components/common/MapInfo'
import Wordcloud from '../components/common/Wordcloud'
import rankData from '../components/common/rankData'
import Leftmain from '../components/common/Leftmain'
import shengzhi from '../components/common/shengzhi'
import Swiper from 'swiper'

const formatter = function (number) {
  const numbers = number.toString().split('').reverse()
  const segs = []

  while (numbers.length) segs.push(numbers.splice(0, 3).join(''))

  return segs.join(',').split('').reverse().join('')
}
export default {
  mixins: [drawMixin],
  data() {
    return {
      yun:false,
      isfull:false,
      timing: null,
      loading: true,
      swpier: '',
      lock: 0,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      config: {
        number: [1256],
        content: '{nt}',
        textAlign: 'left',
        style: {
          fontSize: 30,
          fill: '#fff',
          textAlign: 'left',
          fontWeight: 'bolder',
          fontFamily: 'number'
        },
        formatter
      },
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      decorationColor: ['#568aea', '#000000']
    }
  },
  components: {
    shengzhi,
    Leftmain,
    rankData,
    Wordcloud,
    MapInfo,
    cityRank,
    newData,
    Header,
    Citys,
    pageMenu,
    // BarTitle,
    // BarEchar,
    // lineEchar
  }
  ,
  mounted() {
    this.timeFn()
    this.cancelLoading()
    this.banner();

    this.isFullscreen()
    setTimeout(() => {
      this.isfull = false
    }, 5000)
    window.onresize = () => {
      const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || (window.innerHeight === screen.height);
      if (fullscreenElement) {
        this.isfull = false
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.timing)
  },
  methods: {
    checkMenu(){
       // this.yun = true
    },
    isFullscreen() {
      const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || (window.innerHeight === screen.height);
      if (!fullscreenElement) {
        this.isfull = true
      }
    },
    setlock() {
      this.lock = this.lock ? 0 : 1
      if (this.lock) {
        this.swpier.autoplay.stop();
      } else {
        this.swpier.autoplay.start();
      }
    },
    banner() {
      this.$nextTick(() => {
        setTimeout(() => {
          this.swpier = new Swiper(this.$refs.floor1Swiper, {
            autoplay: {
              delay: 3000,
              disableOnInteraction: false
            },
            loop: false,
            // 自定义分页器，必须的type类型
            type: 'custom',
            pagination: {//分页容器的css选择器
              el: '.swiper-pagination',
              clickable: true, //轮播按钮支持点击
              bulletClass: "checkMAp",
              bulletActiveClass: "checkMAp-active",
              renderBullet: function (index, className) {
                return (

                    '<span class="' + className + '" >' + (index == 0 ? '市州' : '省直') + "</span>"
                );
              },
            }
          })
        }, 500)
      })
    },
    swiperAction(playing) {
      if (this.lock == 0) {
        if (playing) {
          this.swpier.autoplay.stop();
        } else {
          this.swpier.autoplay.start();
        }
      }
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    }
    ,
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>

@import '../assets/scss/index.scss';

::v-deep {
  .el-tooltip__popper.is-light{
    background: #8face9;
  }
  .swiper-container {
    position: relative;

    .swiper-slide {
      overflow: hidden;
    }

    .checkMAp {
      background: rgba(129, 155, 217, .2);
      padding: 5px 20px;
      cursor: pointer;

      &.checkMAp-active {
        background: rgba(129, 155, 217, .6);
      }

      &:first-child {
        border-bottom-left-radius: 10px;
        border-top-left-radius: 10px;
      }

      &:last-child {
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
      }
    }


  }
}
.locks {
  position: absolute;
  right: 20px;
  bottom: 0;
  z-index: 999;
  cursor: pointer;

  .iconfont {
    font-size: 20px;
  }
}
.mains {
  margin: 15px;
  margin-right: 0;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 10;

  .wzdataBox {

    display: flex;
    margin-top: 20px;

    .threadlist {
      margin-left: 10px;
    }
  }

  .map {
    display: flex;
    height: 585px;
    justify-content: space-between;

    .left-marin-warp {
      width: 1060px;
    }


  }

  .left {
    width: 1460px;
    //border:1px solid #ddd;
  }

  .right {
    width: 500px;
    margin-left: 20px;
    margin-top: 5px;
  }
}


</style>
